<style scoped>
</style>
<!--  -->
<template>
  <div class="product-image">
    <el-form-item label="封面图片" v-if="system && system.systemType && system.systemType.id === 3">
      <el-button type="info" @click.stop="chooseImageFace">选择图片</el-button>
      <ProductImageList :imageList="product.imageListFace" :resetImageList="resetImageListFace" />
    </el-form-item>

    <el-form-item label="轮播图片" v-if="system && system.systemType && system.systemType.id === 3">
      <el-button type="info" @click.stop="chooseImageInfo">选择图片</el-button>
      <ProductImageList :imageList="this.product.imageListInfo" :resetImageList="resetImageListInfo" />
    </el-form-item>

    <!-- 选择图片 -->
    <ChooseRepertory ref="chooseImage" />
  </div>
</template>

<script>
import ProductImageList from '@/components/main/user/system/product/common/ProductImageList.vue'
import * as functions from '@/core/functions.js'
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
export default {
  props: {
    system: {
      type: Object
    },
    product: {
      type: Object
    },
    resetImageListFace: {
      type: Function
    },
    resetImageListInfo: {
      type: Function
    }
  },
  data () {
    return {
    }
  },
  methods: {
    // 选择封面图片
    chooseImageFace () {
      if (this.product.imageListFace.length > 0) {
        this.$message.error('只允许选择一张图片')
        return
      }
      this.$refs['chooseImage'].show({ title: '选择产品封面图片', where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          let imageList = repertoryList.map(item => {
            let repertoryImageSrc = { hostId: this.$store.state.host.id, repertoryId: item.id, suffix: item.suffix, type: item.type, link: item.link }
            return {
              id: item.id,
              src: functions.getRepertoryImageSrc(repertoryImageSrc),
              title: item.originalFilename,
              alt: item.originalFilename
            }
          })
          this.resetImageListFace(imageList)
        }
      })
    },
    // 选择产品轮播图片
    chooseImageInfo () {
      if (this.product.imageListInfo.length >= 50) {
        this.$message.error('选择图片不能超过50张')
        return
      }
      this.$refs['chooseImage'].show({ title: '选择产品轮播图片', where: { type: [0, 4] }, fixedCondition: { type: true }, max: (50 - this.product.imageListInfo.length) }, (repertoryList) => {
        if (repertoryList.length > 0) {
          let imageList = JSON.parse(JSON.stringify(this.product.imageListInfo))
          let choose = repertoryList.map(item => {
            let repertoryImageSrc = { hostId: this.$store.state.host.id, repertoryId: item.id, suffix: item.suffix, type: item.type, link: item.link }
            return {
              id: item.id,
              src: functions.getRepertoryImageSrc(repertoryImageSrc),
              title: item.originalFilename,
              alt: item.originalFilename
            }
          })
          let all = imageList.concat(choose)
          this.resetImageListInfo(all)
        }
      })
    }
  },
  components: {
    ProductImageList,
    ChooseRepertory
  }
}
</script>
